import React, { useRef ,useEffect,useState} from 'react'
import '@/assets/less/logmanagment.less'
import { Input, Select, DatePicker, Space, Table ,message} from 'antd';
import { logsearch, logcolumns } from '@/assets/data/common.js'
import moment from 'moment'
import locale from 'antd/lib/date-picker/locale/zh_CN'
import 'moment/locale/zh-cn'
import { getLogInfo, searchLogApi }  from '@/request/logmanagment.js'
React.Component.prototype.$moment = moment
moment.locale('zh-cn')

function LogManagment() {
  const { Search } = Input;
  const { RangePicker } = DatePicker;
  const [value, setValue] = useState()   //搜索词
  const [load, setLoad] = useState(false)
  const [logData, setLogData] = useState([])
  const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 })

  const [searchCondation, setSearchCondation] = useState({       //搜索条件
    time:"",                  //时间范围
    type:"",                  //检索条件类型
    searchword:""             //检索词
  })   
  
  /* 初始化时间 */
  let defaultValue = [moment(new Date(new Date(new Date().toLocaleDateString()).getTime()), "YYYY-MM-DD HH:mm:ss"), moment(new Date(), "YYYY-MM-DD HH:mm:ss")]
  
  
  /* 改变时间范围 */
  const onChange = (value, dateString) => setSearchCondation({ ...searchCondation, time: dateString })

  /*检索条件 */
  const conditionchangehHandle = (value) => setSearchCondation({ ...searchCondation, type: value })

  /* 检索词 */
  const keyWords = (e) => { 
    setValue(e.target.value)
    setSearchCondation({ ...searchCondation, searchword: e.target.value })
  } 

  useEffect(() => {
    setSearchCondation({ ...searchCondation, time: defaultValue })
    getLog()
  }, [])

  /* 获取日志信息 */
  const getLog = () => {
    setLoad(true)
    getLogInfo(defaultValue).then(res => {
      console.log("====",res);
      setPagination({ ...pagination, total: res.data.length })
      res.data.map((item, index) => {
        item['key'] = index + 1
        return item
      })
      setLogData(res.data)
      setLoad(false)
    })
  }
  
  /* 搜索 */
  const onSearch= (value)=>{
    if(!searchCondation.type){
      return message.warn("请选择检索条件")
    }
    setLoad(true)
    searchLogApi(searchCondation).then(res=>{
      setPagination({ ...pagination, total: res.data.length })
      setLogData(res.data)
    })
    setTimeout(() => {
      setLoad(false)
      setValue("")   //清空搜索框
    }, 1000);
  }
  
  const pageChange=(data)=>{
    setPagination(data)
  }

  return (
    <div className='user_log_info'>
      <div className='header'>
        <div className='time_search'>
         &nbsp; 时间范围 &nbsp;
          <Space direction="vertical" size={12}>
            <RangePicker
              defaultValue={defaultValue}
              showTime={{
                format: 'HH:mm:ss',
              }}
              format="YYYY-MM-DD HH:mm:ss"
              onChange={onChange}
              locale={locale}
            />
          </Space>
        </div>
        <div className='condition_search'>
          <Select
            placeholder='请选择检索条件'
            showArrow
            onChange={conditionchangehHandle}
            style={{ height: 35, color:"#807171", width:140}}
            options={logsearch}
          />
          &nbsp;
          <Search
            onSearch={onSearch}
            onChange={keyWords}
            value={value}
            loading={load}
           
            placeholder="检索内容"
            style={{
              width: '170px'
            }}
          />
        </div>
      </div>
      <div className="login_table">
        <Table
         columns={logcolumns} 
         dataSource={logData}
          onChange={pageChange}
          pagination={pagination} />
      </div>
    </div>
  )
}

export default LogManagment
